import React, { useRef, useEffect, useState, FC } from 'react'
import { Button, Space, Swiper, Toast } from 'antd-mobile'
import { Ajax } from '../../api/api';
import Dao from '../../hooks/Dao';
import { useNavigate } from 'react-router-dom';
import { useGetYearWeek } from '../../hooks';
import { useLocalStorageState } from 'ahooks';

const Guide: FC<{

}> = () => {
    const [banners, setBanner] = useState<any>([])
    const router = useNavigate()
    const getBannerAsync = async () => {
        let res = await Ajax.getBanner() as unknown as any;
        setBanner(res.banners.slice(0, 5))
    }
    const [week] = useGetYearWeek()
    const [localWeek, setLocalWeek] = useLocalStorageState<string | number | undefined>(
        'localWeek'
    );

    useEffect(() => {
        if (localWeek) {
            if (week == localWeek) {
                router('/app/home')
            } else {
                setLocalWeek(week)
                getBannerAsync()
            }
        } else {
            setLocalWeek(week)
            getBannerAsync()
        }
    }, [])

    const [current, setCurrent] = useState(0)

    return (
        <div className='guide' style={{ width: '100%', height: '100%', position: 'relative' }}>
            <Swiper autoplay loop allowTouchMove={true}
                defaultIndex={current}
                onIndexChange={(index) => setCurrent(index)}
                style={{
                    '--border-radius': '8px',
                    'width': '100%',
                    'height': '100%'
                }}
            >{
                    banners.map((item: any, index: number) => (
                        <Swiper.Item key={index}>
                            <div style={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                                <img src={item.imageUrl} style={{
                                    borderRadius: 15, 'width': '80%',
                                    'height': '800px',
                                }} alt="" />
                            </div>
                        </Swiper.Item>
                    ))
                }</Swiper>
            {
                (current == banners.length - 1) && <Button onClick={() => router('/app/home')} color='success' style={{ position: 'absolute', bottom: 100, left: '50%', transform: 'translateX(-50%)', borderRadius: '15' }}>进入App主页</Button>
            }
            <Dao time={10 * 1000} color={'#000'} style={{ position: 'absolute', top: 100, right: 100 }} onEnd={() => { router('/app/home') }} ></Dao>
        </div>
    )
}

export default Guide